{% extends "base.html" %}

{% block title %}Profile - PinCaiCai 2.0{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-user"></i> User Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>User ID:</strong></div>
                        <div class="col-sm-8"><span id="user_id">Loading...</span></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Username:</strong></div>
                        <div class="col-sm-8"><span id="username">Loading...</span></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Email:</strong></div>
                        <div class="col-sm-8"><span id="email">Loading...</span></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Age:</strong></div>
                        <div class="col-sm-8"><span id="age">Loading...</span></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Gender:</strong></div>
                        <div class="col-sm-8"><span id="gender">Loading...</span></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Account Balance:</strong></div>
                        <div class="col-sm-8">
                            <span id="balance" class="text-success fw-bold">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-credit-card"></i> Account Recharge</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="rechargeAmount" class="form-label">Recharge Amount</label>
                        <div class="input-group">
                            <span class="input-group-text">¥</span>
                            <input type="number" class="form-control" id="rechargeAmount" 
                                   placeholder="Please enter recharge amount" min="0.01" step="0.01">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Quick Recharge</label>
                        <div class="btn-group w-100" role="group">
                            <button type="button" class="btn btn-outline-primary" onclick="setRechargeAmount(10)">¥10</button>
                            <button type="button" class="btn btn-outline-primary" onclick="setRechargeAmount(50)">¥50</button>
                            <button type="button" class="btn btn-outline-primary" onclick="setRechargeAmount(100)">¥100</button>
                            <button type="button" class="btn btn-outline-primary" onclick="setRechargeAmount(200)">¥200</button>
                        </div>
                    </div>
                    <button class="btn btn-success w-100" onclick="recharge()">
                        <i class="fas fa-plus"></i> Recharge Now
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    loadUserProfile();
});

function loadUserProfile() {
    fetch('/api/profile')
        .then(response => response.json())
        .then(data => {
            if (data.user) {
                document.getElementById('user_id').textContent = data.user.user_id;
                document.getElementById('username').textContent = data.user.username;
                document.getElementById('email').textContent = data.user.email || 'Not set';
                document.getElementById('age').textContent = data.user.age || 'Not set';
                document.getElementById('gender').textContent = data.user.gender || 'Not set';
                document.getElementById('balance').textContent = '¥' + data.user.balance.toFixed(2);
            } else {
                alert('Failed to load user information: ' + (data.error || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error loading profile:', error);
            alert('Failed to load user information, please check login status');
        });
}

function setRechargeAmount(amount) {
    document.getElementById('rechargeAmount').value = amount;
}

function recharge() {
    const amount = parseFloat(document.getElementById('rechargeAmount').value);
    
    if (!amount || amount <= 0) {
        alert('Please enter a valid recharge amount');
        return;
    }
    
    if (amount < 0.01) {
        alert('Recharge amount cannot be less than 0.01 yuan');
        return;
    }
    
    if (confirm(`Are you sure you want to recharge ¥${amount.toFixed(2)}?`)) {
        fetch('/api/balance', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                amount: amount
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.message) {
                alert('Recharge successful! Current balance: ¥' + data.balance.toFixed(2));
                // Update displayed balance
                document.getElementById('balance').textContent = '¥' + data.balance.toFixed(2);
                // Clear input field
                document.getElementById('rechargeAmount').value = '';
            } else {
                alert('Recharge failed: ' + (data.error || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error recharging:', error);
            alert('Recharge failed, please try again');
        });
    }
}
</script>
{% endblock %}
